<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      float: left;
      /* float: right; */
      width: 200px;
      height: 200px;
    }

    .red {
      /* 将块级元素转换成行内块元素之后，green就可以到最右上角了 */
      /* display: inline-block; */
      background-color: red;
    }

    .green {
      /* float: right; */
      /* float: left; */
      background-color: green;
    }

    .blue {
      background-color: blue;
    }

    span {
      float: left;
      width: 200px;
      height: 200px;
      background-color: orange;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>

<body>
  <!-- 浮动的元素会脱离标准流，在标准流中不占位置，相当于飘在空中的， -->
  <!-- 且比标准流高半个级别，可以覆盖标准流中的元素 -->
  <!-- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 -->
  <!-- 浮动元素会受到 上面元素边界 的影响 -->
  <!-- 浮动元素一行可以显示多个 -->
  <!-- 并且可以设置宽高 -->
  <!-- 注意：浮动的元素【不能】通过text-align: center或者margin: 0 auto，让【浮动元素本身】水平居中 -->
  <!-- 但是浮动元素里面的内容可以居中哦 -->

  <!-- 1、为什么当给green设置了float: right;后，它不会跑到最右上面去，而是水平移到了最右边的位置 -->
  <!-- 答案：因为块级元素是独占一行的，它想到最右上角去，但是上面边界都是red的地盘，没有空间了，所以这也说明了浮动元素会受到上面元素边界的影响 -->

  <!-- <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div> -->

  <!-- 注意：当行内元素设置了float之后，就可以设置宽高了 -->

  <span>我是一个span标签</span>
  <span>我是一个span标签</span>
  <span>我是一个span标签</span>

</body>

</html>